<template>
  <div class="pageHome">
    <div class="filter-main">
      <div class="paragraph-title">展商筛选</div>
      <FilterComp />
    </div>

    <div class="home-tab">
      <div :class="['tab-item', flag === '1' ? 'active' : '']" @click="tabChange('1')">综合排名</div>
      <div :class="['tab-item', flag === '2' ? 'active' : '']" @click="tabChange('2')">热度排名</div>
    </div>
    <el-empty description="暂无数据" />
  </div>
</template>
<script setup lang="ts">
import {defineComponent, ref} from "vue";
import FilterComp from './filterComp.vue'

const flag = ref('1')

function tabChange(type: string) {
  flag.value = type
}

defineComponent({name: 'PageHomeIndex'})
</script>

<style scoped lang="scss">
.pageHome {
  width: 100%;

  .filter-main {
    padding: 152px 0 30px 0;
    background-color: #fff;

    .paragraph-title {
      position: relative;
      padding-left: 34px;
      font-size: 18px;
      color: #2e3244;
      font-weight: 700;
      font-family: PingFangSC, PingFang SC;

      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
        background: #FF4350;
        border-radius: 4px;
      }
    }
  }

  .home-tab {
    width: calc(100% - 40px);
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 30px 0 20px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(187, 187, 187, 0.5);

    .tab-item {
      position: relative;
      padding-left: 38px;
      cursor: pointer;

      &:before {
        content: '';
        display: inline-block;
        width: 18px;
        height: 18px;
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
      }

      &:first-child {
        &:before {
          background: url('./assets/zonghe.png') no-repeat center;
        }

        &.active:before {
          background: url('./assets/zonghe-active.png') no-repeat center;
        }
      }

      &:nth-child(2) {
        &:before {
          background: url('./assets/remen.png') no-repeat center;
        }

        &.active:before {
          background: url('./assets/remen-active.png') no-repeat center;
        }
      }

      &.active {
        color: #FF4350;
      }
    }
  }

}
</style>
